<template>
  <div class="prdp-outer">
    <div class="prdp-main">
      <!-- 头部标题栏 -->
      <!-- <div class="prdp-title-bar">
        <h2>打滑报表</h2>
      </div> -->
      <!-- 搜索栏 -->
      <div class="prdp-search-container">
        <el-form :inline="true" :model="searchForm" class="aprd-search-form">
          <el-form-item label="选择日期：">
            <el-date-picker v-model="searchForm.dateRange" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" style="width:220px" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button :type="reportType==='day'?'primary':'default'" @click="reportType='day'">日报</el-button>
            <el-button :type="reportType==='week'?'primary':'default'" @click="reportType='week'">周报</el-button>
            <el-button :type="reportType==='month'?'primary':'default'" @click="reportType='month'">月报</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 内容区域 -->
      <div class="prdp-table-container">
        <el-row :gutter="16">
          <el-col :span="12">
            <div class="card-white">
              <div class="card-title">原料规格打滑频次统计</div>
              <div class="card-content-flex">
                <el-table :data="table1" size="small" :header-cell-style="{background:'#f5f7fa',color:'#333',fontWeight:'bold',textAlign:'center'}" :cell-style="{color:'#333',textAlign:'center'}" style="margin-bottom:8px;flex:1;">
                  <el-table-column prop="spec" label="规格" />
                  <el-table-column prop="produceCount" label="生产卷数" />
                  <el-table-column prop="slipCount" label="打滑卷数" />
                  <el-table-column prop="rate" label="频次" />
                </el-table>
                <div ref="bar1Ref" class="chart-white"></div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="card-white">
              <div class="card-title">钢牌号打滑频次统计</div>
              <div class="card-content-flex">
                <el-table :data="table2" size="small" :header-cell-style="{background:'#f5f7fa',color:'#333',fontWeight:'bold',textAlign:'center'}" :cell-style="{color:'#333',textAlign:'center'}" style="margin-bottom:8px;flex:1;">
                  <el-table-column prop="steel" label="钢牌号" />
                  <el-table-column prop="produceCount" label="生产卷数" />
                  <el-table-column prop="slipCount" label="打滑卷数" />
                  <el-table-column prop="rate" label="频次" />
                </el-table>
                <div ref="bar2Ref" class="chart-white"></div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="16" style="margin-top:16px">
          <el-col :span="12">
            <div class="card-white">
              <div class="card-title">厚度打滑频次统计</div>
              <div class="card-content-flex">
                <el-table :data="table4" size="small" :header-cell-style="{background:'#f5f7fa',color:'#333',fontWeight:'bold',textAlign:'center'}" :cell-style="{color:'#333',textAlign:'center'}" style="margin-bottom:8px;flex:1;">
                  <el-table-column prop="thick" label="厚度[mm]" />
                  <el-table-column prop="produceCount" label="生产卷数" />
                  <el-table-column prop="slipCount" label="打滑卷数" />
                  <el-table-column prop="rate" label="频次" />
                </el-table>
                <div ref="bar4Ref" class="chart-white"></div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="card-white">
              <div class="card-title">宽度打滑频次统计</div>
              <div class="card-content-flex">
                <el-table :data="table3" size="small" :header-cell-style="{background:'#f5f7fa',color:'#333',fontWeight:'bold',textAlign:'center'}" :cell-style="{color:'#333',textAlign:'center'}" style="margin-bottom:8px;flex:1;">
                  <el-table-column prop="width" label="宽度[mm]" />
                  <el-table-column prop="produceCount" label="生产卷数" />
                  <el-table-column prop="slipCount" label="打滑卷数" />
                  <el-table-column prop="rate" label="频次" />
                </el-table>
                <div ref="bar3Ref" class="chart-white"></div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="16" style="margin-top:16px">
          <el-col :span="16">
            <div class="card-white">
              <div class="card-title" style="display:flex;align-items:center;justify-content:space-between;">
                <span>打滑频次</span>
                <div>
                  <el-button size="small" :type="bottomTab==='roll'?'primary':'default'" @click="bottomTab='roll'; nextTick(initBottomBar)">各辊子打滑频次</el-button>
                  <el-button size="small" :type="bottomTab==='days'?'primary':'default'" @click="bottomTab='days'; nextTick(initBottomBar)">近30天打滑频次</el-button>
                </div>
              </div>
              <div ref="bottomBarRef" class="chart-white" style="height:260px;"></div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="card-white">
              <div class="card-title">各位置打滑频次统计</div>
              <div ref="pieRef" class="chart-white" style="height:260px;"></div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import * as echarts from 'echarts/core';
import { BarChart, LineChart, PieChart } from 'echarts/charts';
import { TooltipComponent, GridComponent, LegendComponent, TitleComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import type { EChartsOption } from 'echarts';

echarts.use([
  TooltipComponent,
  GridComponent,
  LegendComponent,
  TitleComponent,
  BarChart,
  LineChart,
  PieChart,
  CanvasRenderer
]);

const searchForm = ref({
  dateRange: [],
});
const reportType = ref<'day'|'week'|'month'>('day');

const table1 = ref([
  { spec: 'T2 厚度2.3 宽度1300', produceCount: 2, slipCount: 1, rate: '50%' },
  { spec: 'T2 厚度2.3 宽度1300', produceCount: 22, slipCount: 15, rate: '68%' },
  { spec: 'T1 厚度1.8 宽度1300', produceCount: 8, slipCount: 3, rate: '38%' },
  //{ spec: 'T1 厚度1.8 宽度1300', produceCount: 8, slipCount: 3, rate: '38%' },
  { spec: 'T0 厚度1.5 宽度1300', produceCount: 71, slipCount: 5, rate: '7%' },
]);
const table2 = ref([
  { steel: 'HC380LA', produceCount: 21, slipCount: 21, rate: '100%' },
  { steel: '170P1', produceCount: 20, slipCount: 15, rate: '75%' },
  { steel: '250P1', produceCount: 8, slipCount: 3, rate: '38%' },
  { steel: 'SPCC', produceCount: 107, slipCount: 8, rate: '7%' },
  { steel: 'ST12', produceCount: 315, slipCount: 12, rate: '4%' },
]);
const table3 = ref([
  { width: 1300, produceCount: 465, slipCount: 38, rate: '8%' },
  { width: 1450, produceCount: 284, slipCount: 2, rate: '1%' },
  { width: 2000, produceCount: 29, slipCount: 0, rate: '0%' },
  { width: 1700, produceCount: 71, slipCount: 0, rate: '0%' },
  { width: 1550, produceCount: 117, slipCount: 0, rate: '0%' },
]);
const table4 = ref([
  { thick: 1.5, produceCount: 213, slipCount: 25, rate: '12%' },
  { thick: 1.9, produceCount: 142, slipCount: 4, rate: '3%' },
  { thick: 1.0, produceCount: 449, slipCount: 10, rate: '2%' },
  { thick: 2.3, produceCount: 59, slipCount: 1, rate: '2%' },
  { thick: 0.6, produceCount: 83, slipCount: 0, rate: '0%' },
]);

// 图表ref
const bar1Ref = ref<HTMLElement | null>(null);
const bar2Ref = ref<HTMLElement | null>(null);
const bar3Ref = ref<HTMLElement | null>(null);
const bar4Ref = ref<HTMLElement | null>(null);
const pieRef = ref<HTMLElement | null>(null);
const bottomBarRef = ref<HTMLElement | null>(null);

let bar1Instance: echarts.ECharts | null = null;
let bar2Instance: echarts.ECharts | null = null;
let bar3Instance: echarts.ECharts | null = null;
let bar4Instance: echarts.ECharts | null = null;
let pieInstance: echarts.ECharts | null = null;
let bottomBarInstance: echarts.ECharts | null = null;

const bottomTab = ref<'roll'|'days'>('roll');

// 可直接替换的数据源（各辊子/近30天/各位置）
// 各辊子打滑频次 - 假数据
const rollSlipCategories = ref<string[]>(['R1','R3','R5','R7','R9','R11','R13','R15']);
const rollSlipData = ref<number[]>([18, 14, 11, 8, 6, 4, 2, 1]);

// 近30天打滑频次 - 假数据
const days30Categories = ref<string[]>(Array.from({length: 30}).map((_,i)=>`D${i+1}`));
const days30Data = ref<number[]>([0,1,0,2,1,0,3,0,1,2,0,0,1,0,4,0,2,1,0,0,3,0,1,0,2,0,1,0,0,1]);

// 各位置打滑频次统计 - 假数据
const positionPie = ref<Array<{value:number; name:string;}>>([
  { value: 26, name: '入口段' },
  { value: 18, name: '工艺段' },
  { value: 12, name: '出口段' },
  { value: 9,  name: '活套' },
  { value: 7,  name: '加热段' },
  { value: 5,  name: '冷却段' },
  { value: 3,  name: '矫直段' },
  { value: 2,  name: '卷取区' },
]);

const getBarOption = (categories: any[], data: any[], color: string, yMax?: number): EChartsOption => ({
  backgroundColor: '#fff',
  grid: { left: 30, right: 10, top: 20, bottom: 30 },
  xAxis: { type: 'category', data: categories, axisLabel: { color: '#333', fontSize: 10 } },
  yAxis: { type: 'value', axisLabel: { color: '#333', fontSize: 10 }, max: yMax },
  series: [{ type: 'bar', data, itemStyle: { color }, barWidth: '60%' }]
});

const getPieOption = (): EChartsOption => ({
  backgroundColor: '#fff',
  legend: { orient: 'vertical', right: 10, top: 20, textStyle: { color: '#333', fontSize: 10 } },
  series: [{
    type: 'pie',
    radius: '60%',
    data: positionPie.value,
    label: { color: '#333', fontSize: 10 }
  }]
});

// 底部柱状图（各辊子/近30天）
const getBottomBarOption = (): EChartsOption => {
  const isRoll = bottomTab.value === 'roll';
  const categories = isRoll ? rollSlipCategories.value : days30Categories.value;
  const data = isRoll ? rollSlipData.value : days30Data.value;
  return {
    backgroundColor: '#fff',
    grid: { left: 40, right: 10, top: 20, bottom: 30 },
    xAxis: { type:'category', data: categories, axisLabel: { color:'#333', fontSize: 10 } },
    yAxis: { type:'value', axisLabel: { color:'#333', fontSize: 10 }, min: 0 },
    series: [{ type:'bar', data, itemStyle:{ color:'#3399ff' }, barWidth:'60%' }],
    animation: true
  } as EChartsOption;
};

const handleSearch = () => {
  // 查询逻辑
};

const disposeCharts = () => {
  bar1Instance?.dispose();
  bar2Instance?.dispose();
  bar3Instance?.dispose();
  bar4Instance?.dispose();
  pieInstance?.dispose();
  bottomBarInstance?.dispose();
  bar1Instance = bar2Instance = bar3Instance = bar4Instance = pieInstance = null;
  bottomBarInstance = null;
};

const initCharts = () => {
  disposeCharts();
  console.log("1")
  // 1
  if (bar1Ref.value) {
    bar1Instance = echarts.init(bar1Ref.value);
    bar1Instance.setOption(getBarOption(table1.value.map(i=>i.spec), table1.value.map(i=>parseInt(String(i.rate))), '#3399ff', 100));
  }
  // 2
  if (bar2Ref.value) {
    bar2Instance = echarts.init(bar2Ref.value);
    bar2Instance.setOption(getBarOption(table2.value.map(i=>i.steel), table2.value.map(i=>parseInt(String(i.rate))), '#3399ff', 100));
  }
  // 3
  if (bar3Ref.value) {
    bar3Instance = echarts.init(bar3Ref.value);
    bar3Instance.setOption(getBarOption(table3.value.map(i=>i.width), table3.value.map(i=>parseInt(String(i.rate))), '#3399ff', 100));
  }
  // 4
  if (bar4Ref.value) {
    bar4Instance = echarts.init(bar4Ref.value);
    bar4Instance.setOption(getBarOption(table4.value.map(i=>i.thick), table4.value.map(i=>parseInt(String(i.rate))), '#3399ff', 100));
  }
  // pie
  if (pieRef.value) {
    pieInstance = echarts.init(pieRef.value);
    pieInstance.setOption(getPieOption());
  }
  // bottom bar
  if (bottomBarRef.value) {
    bottomBarInstance = echarts.init(bottomBarRef.value);
    bottomBarInstance.setOption(getBottomBarOption());
  }
};

const handleResize = () => {
  bar1Instance?.resize();
  bar2Instance?.resize();
  bar3Instance?.resize();
  bar4Instance?.resize();
  pieInstance?.resize();
  bottomBarInstance?.resize();
};

onMounted(() => {
  nextTick(initCharts);
  window.addEventListener('resize', handleResize);
});
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
  disposeCharts();
});

// 切换底部图类型后重新渲染
const initBottomBar = () => {
  if (bottomBarRef.value) {
    if (!bottomBarInstance) bottomBarInstance = echarts.init(bottomBarRef.value);
    bottomBarInstance.setOption(getBottomBarOption());
  }
}
</script>

<style scoped>
.prdp-outer {
  width: 100vw;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to top, #eaf1fb 0%, #2c69e8 100%);
  overflow: hidden;
}

/* 修复下拉菜单样式问题 */
:deep(.el-dropdown-menu) {
  background: #fff !important;
  border: 1px solid #e4e7ed !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 120px !important;
}

:deep(.el-dropdown-menu__item) {
  padding: 8px 16px !important;
  color: #606266 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  border: none !important;
  background: transparent !important;
}

:deep(.el-dropdown-menu__item:hover) {
  background: #f5f7fa !important;
  color: #409eff !important;
}

:deep(.el-dropdown-menu__item:not(:last-child)::after) {
  content: none !important;
}

/* 确保下拉菜单容器没有多余的边框和线条 */
:deep(.el-dropdown) {
  display: inline-block !important;
}

:deep(.el-dropdown-menu.el-popper) {
  margin: 0 !important;
  border: none !important;
  outline: none !important;
}
.prdp-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 20px;
}
.prdp-table-container {
  width: 100%;
}
.card-white {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(30,60,114,0.08);
  padding: 18px 18px 10px 18px;
  margin-bottom: 16px;
  color: #333;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  color: #333;
}
.card-content-flex {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
  height: 260px;
}
.chart-white {
  background: #fff !important;
  border-radius: 8px;
  flex: 1;
  min-width: 180px;
  min-height: 160px;
  box-shadow: 0 2px 8px rgba(30,60,114,0.04);
  height: 100%;
}

/* 头部标题栏字体颜色 */
.prdp-title-bar h2 {
  color: #fff;
}

.el-table{
  --el-table-border-color:none
}
</style>
